<template>
    <div ref="container" class="container">
        <div>
            <!-- city-sort-begin -->
            <div class="city-sort">
                <div class="sort-title">
                    字母排序
                </div>
                <ul class="sort-list clearfix">
                    <li class="sort-item" v-for="(item,index) in allCities"  @click="changeSort(index)" :key="index">{{index}}</li>
                </ul>
            </div>
            <!-- city-sort-end -->

            <!-- city-list-begin -->
            <div class="city-list">
                <div v-for="(itemGroup,index) in allCities" :key="index" :ref="index">
                    <div class="list-title">
                        {{index}}
                    </div>
                    <ul class="list-list clearfix">
                        <li class="list-item" v-for="(item,index) in itemGroup" @click="changeCityName(item)" :key="index">{{item}}</li>
                    </ul>
                </div>
            </div>
            <!-- city-list-end -->
        </div>
    </div>    
</template>

<script>
import BScroll from 'better-scroll'

export default {
    name : "city-list",
    data(){
        return {
            scroll : ""
        }
    },
    props : ["sortCities","allCities"],
    methods : {
        changeSort : function(sortName){
            this.scroll.scrollToElement(this.$refs[sortName][0],400)
        },
        changeCityName : function(cityName){
            this.$store.commit("setCityHandle",cityName);
            this.$router.push("/")
        }
    },
    mounted(){
        let container = this.$refs.container;
        this.scroll = new BScroll(container)
    }
}
</script>

<style scoped>

.sort-title{ font-size:0.26rem; color:#212121; padding:.2rem; background:#f5f5f5; }

.sort-list{  }

.sort-item{ width:16.6667%; height:0.8rem; line-height:0.8rem; text-align:center; border-bottom:0.02rem solid #ccc; border-right:0.02rem solid #ccc; box-sizing:border-box; float: left; box-shadow:0 0 0.1rem #f0eeee;}

.sort-item:nth-of-type(3n){ border-right:none;}

.list-title{ font-size:0.26rem; color:#212121; padding:.2rem; background:#f5f5f5; }

.list-list{  }

.list-item{ width:25%; height:0.8rem; line-height:0.8rem; text-align:center; border-bottom:0.02rem solid #ccc; border-right:0.02rem solid #ccc; box-sizing:border-box; float: left; box-shadow:0 0 0.1rem #f0eeee;}

.list-item:nth-of-type(4n){ border-right:none;}

.container{ position: absolute; left:0; top:3.14rem; right:0; bottom:0; overflow: hidden;;}

</style>


